<template>
  <div class="question-type-two">
    <div class="question-header">
      <div class="question-progress">
        <span>
          Question
          <i>{{ questionNumber }}</i>
          /{{ totalQuestions }}
        </span>
        <div class="progress-bar">
          <div class="progress-fill" :style="{ width: `${progress}%` }"></div>
        </div>
      </div>
    </div>

    <h2 class="question-title">{{ question.title }}</h2>

    <div class="options-container">
      <!-- 这是每一题的选项 -->
      <div v-for="(option, index) in question.options" :key="index" class="option-item" :class="{ selected: selectedOption !== null && selectedOption === index }" @click="selectOption(index, question.id)">
        <div class="option-text">
          {{ option }}
        </div>
        <div class="option-check" v-if="selectedOption !== null && selectedOption === index">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" fill="currentColor" />
          </svg>
        </div>
      </div>
    </div>

    <div class="navigation-buttons">
      <button class="prev-btn" @click="handlePrevQuestion" :disabled="questionNumber === 1">Previous</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QuestionTypeTwo',
  props: {
    question: {
      type: Object,
      required: true,
    },
    questionNumber: {
      type: Number,
      required: true,
    },
    totalQuestions: {
      type: Number,
      required: true,
    },
    progress: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      selectedOption: null,
    }
  },
  watch: {
    // 监听题目编号的变化，当用户点击"上一题"按钮返回时，重新检查之前的答案
    questionNumber: {
      handler() {
        this.checkPreviousAnswer()
      },
      immediate: true,
    },
  },
  methods: {
    selectOption(index, qId) {
      // 允许重新选择，即使之前已选择
      this.selectedOption = index
      // 向父组件发送选择的选项
      this.$emit('select-option', index, qId)

      // 短暂延迟，让用户可以看到选中效果
      setTimeout(() => {
        // 清除选中效果
        this.selectedOption = null
        // 跳转到下一题
        this.$emit('next-question')
      }, 300) // 使用更短的延迟时间
    },

    // 处理上一题按钮点击
    handlePrevQuestion() {
      // 正常跳转到上一题
      this.$emit('prev-question')
    },

    // 检查之前的答案
    checkPreviousAnswer() {
      // 从Vuex store获取所有答案
      const answers = this.$store.state.answers || []

      // 查找当前问题的答案
      const previousAnswer = answers.find((answer) => answer.index === this.questionNumber - 1)

      // 如果找到了之前的答案，设置选择状态
      if (previousAnswer !== undefined) {
        this.selectedOption = previousAnswer.selectedOption
      } else {
        // 没有找到之前的答案，明确设置为null
        this.selectedOption = null
      }
    },
  },
  created() {
    // 初始化时不做任何事情
  },
}
</script>

<style scoped>
.question-type-two {
  max-width: 500px;
  margin: 0 auto;
  padding: 70px 16px 16px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.question-header {
  width: 100%;
  padding: 16px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: #e2e4f5;
}

.question-progress {
  font-size: 14px;
  color: #111;
}

.question-progress > span {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 14px;
}

.question-progress > span > i {
  color: #775ae0;
  font-size: 18px;
  font-family: NotoSans-SemiBold;
}

.progress-bar {
  height: 5px;
  background: #fff;
  border-radius: 10px;
  margin-top: 8px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #775ae0 0%, #f78295 100%);
  border-radius: 10px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.question-title {
  font-size: 18px;
  margin-bottom: 12px;
  text-align: left;
  font-family: NotoSans-SemiBold;
}

.options-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.option-item {
  background: white;
  border-radius: 15px;
  padding: 16px;
  display: flex;
  align-items: center;
  border: 2px solid transparent;
  transition: all 0.2s;
  position: relative;
  min-height: 60px;
  text-align: left;
}

.option-item:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.option-item.selected {
  border-color: #7b5cff;
  background-color: #f8f5ff;
}

.option-text {
  flex: 1;
  font-size: 14px;
  padding-right: 30px;
  font-family: NotoSans-SemiBold;
}

.option-check {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: #7b5cff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.option-check svg {
  width: 16px;
  height: 16px;
}

.navigation-buttons {
  display: flex;
  justify-content: space-between;
}

.prev-btn {
  background: #775ae0;
  color: white;
  border: none;
  padding: 14px 20px;
  border-radius: 24px;
  font-size: 18px;
  width: 100%;
  transition: background 0.2s;
  font-family: NotoSans-SemiBold;
}

.prev-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.prev-btn:hover:not(:disabled) {
  background: #6a4fc8;
}
</style>
